<script lang="ts" setup>
import PopupFramePage from "@/components/PopupFramePage/index.vue";
import { showSuccessToast } from "vant";
import { useI18n } from "vue-i18n";
import { ref } from "vue";
import { UserStore } from "@/store";
import avatar from "@/image/new_img/logo1080FgzU_320.png";
import { FiltrationFun } from "@/utils";
const refPopupFramePage = ref();
const popupType = ref(0);
const { t } = useI18n();
const userStore = UserStore();
const copyUserID = () => {
  navigator.clipboard.writeText(userStore.userLoginInfo.account.uid.toString());
  showSuccessToast("Success");
};
const popupTilte = ref("");
const openPopup = (title, type) => {
  refPopupFramePage.value.clickPopup();
  popupTilte.value = title;
  popupType.value = type;
};

const posswordval = ref("1111111");
const convertToAsterisks = input => {
  if (typeof input !== "string") {
    return "";
  }
  return "*".repeat(input.length);
};
</script>
<template>
  <!-- 用户设置首页 -->
  <div class="frame-div">
    <div class="content-frame">
      <div class="top-frame df ai-center">
        <div class="userimg-frame" @click="openPopup('userSet.setAvatar', 0)">
          <img
            class="userimg"
            :src="
              userStore.userInfoDetails.profile.avatar !== ''
                ? userStore.userInfoDetails.profile.avatar
                : avatar
            "
          />
          <img class="photograph" src="@/image/new_img/home/icon_editavatar.svg" />
        </div>
        <div class="left-frame df ai-center">
          <div class="">
            <div class="vip-frame df ai-center">
              <img class="vip-img" src="@/image/new_img/home/M_VIP_hui.png" />
              <div class="vip-val">{{ userStore.userInfoDetails.account.vipLevel }}</div>
              <img class="Leve-img" :src="FiltrationFun.getActLeve()" />
            </div>
            <div class="user-name omit-1">{{ userStore.userInfoDetails.profile.name }}</div>
            <div class="userId-frame df">
              <div>ID：{{ userStore.userLoginInfo.account.uid }}</div>
              <img
                class="copy-bai-frame"
                src="@/image/new_img/home/copy_bai.png"
                @click="copyUserID"
              />
            </div>
          </div>
        </div>
      </div>
      <!-- 列表 -->
      <div class="user-cell-frame">
        <div class="cell-frame" @click="openPopup('userSet.myTagName', 1)">
          <div class="cell-explain">{{ t("userSet.myTagName") }}</div>
          <div class="cell-content df ai-center jc-space-between">
            <div class="cell-title">{{ userStore.userInfoDetails.profile.name }}</div>
            <img class="bainji-img" src="@/image/new_img/home/bainji_45bai.png" />
          </div>
        </div>
        <div class="cell-frame">
          <div class="cell-explain">{{ t("userSet.registeredAccount") }}</div>
          <div class="cell-content df ai-center background-img">
            <div class="cell-title">{{ userStore.userLoginInfo.account.username }}</div>
          </div>
        </div>
        <div class="cell-frame" @click="openPopup('userSet.passwordSettings', 3)">
          <div class="cell-explain">{{ t("userSet.password") }}</div>
          <div class="cell-content df ai-center jc-space-between">
            <!-- <Field
              v-model="posswordval"
              class="cell-title-frame"
              :disabled="true"
              type="password"
            /> -->
            <div class="cell-title posswordval-frame df ai-center">
              {{ convertToAsterisks(posswordval) }}
            </div>
            <img class="bainji-img" src="@/image/new_img/home/bainji_45bai.png" />
          </div>
        </div>
        <div class="cell-frame" @click="openPopup('userSet.saqueInformation', 4)">
          <div class="cell-content df ai-center jc-space-between">
            <div class="cell-title">{{ t("userSet.saqueInformation") }}</div>
            <img class="bainji-img" src="@/image/new_img/home/yinhangka_45bai.png" />
          </div>
        </div>
        <div class="cell-frame marginTop75" @click="openPopup('userSet.exit', 5)">
          <div class="cell-content df ai-center jc-space-between background-img">
            <div class="cell-title">{{ t("userSet.quitAccount") }}</div>
            <img class="bainji-img" src="@/image/new_img/home/tuichu_jianbian.png" />
          </div>
        </div>
      </div>
      <PopupFramePage ref="refPopupFramePage" :popup-type="popupType" :title="popupTilte" />
    </div>
  </div>
</template>
<style lang="less" scoped>
.interval-frame {
  width: 100%;
  height: 87px;
}
.content-frame {
  width: calc(100% - 56px);
  height: 100%;
  margin: auto;
  // transform: scale(1);
  .top-frame {
    width: 100%;
    margin-top: 76px;
    height: 175.5px;
    .userimg-frame {
      width: 170.5px;
      height: 170.5px;
      border: 1px solid rgba(255, 255, 255, 1);
      border-radius: 50px;
      position: relative;
      left: 0;
      top: 0;
      overflow: hidden;

      .userimg {
        width: 100%;
        height: 100%;
      }

      .photograph {
        position: absolute;
        right: 10px;
        bottom: 10px;
        width: 56px;
        height: 56px;
      }
      .up-input {
        opacity: 0;
      }
    }

    .left-frame {
      width: 50%;
      margin-left: 26px;
      height: 100%;
      .left-frame {
        width: 100%;
        height: 100%;
      }
      .vip-frame {
        margin-bottom: 10px;
      }
      .vip-img {
        width: 33px;
        height: 33px;
        margin-right: 10px;
      }

      .vip-val {
        color: #ffaf00;
        font-size: 32px;
      }
    }

    .user-name {
      color: #ffffff;
      font-size: 48px;
      max-width: 338px;
      font-weight: 700;
    }

    .userId-frame {
      font-size: 24px;
      color: rgba(255, 255, 255, 0.65);
      margin-top: 10px;
    }

    .copy-bai-frame {
      height: 24px;
      width: 24px;
      margin-left: 6px;
    }
  }
}
.user-cell-frame {
  width: 100%;
  height: auto;
  margin-top: 80px;
  .cell-explain {
    font-size: 28px;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 11px;
    margin-left: 20px;
  }
}
.cell-content {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  background-size: 100% 100%;
  background-color: #ffffff0a;
  border-radius: 34px;
  //background-image: url("../../image/new_img/inputv2_long_normal.png");
  //aspect-ratio:16/2;
}
.cell-frame {
  width: 100%;
  height: auto;
  margin-bottom: 30px;
}
.cell-title {
  font-size: 26px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  margin-left: 30px;
}
.cell-title-frame {
  width: 50%;
  margin-left: 30px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 22px;
}
.bainji-img {
  width: 38px;
  height: 38px;
  padding: 8px;
  margin-right: 24px;
}
.background-img {
  background: #ffffff0a;
  border-radius: 34px;
}

.marginTop75 {
  margin-top: 75px;
}
.posswordval-frame {
  letter-spacing: 20px;
  padding-top: 10px;
}
.frame-div {
  overflow: hidden;
}
.Leve-img {
  width: 66px;
  height: 66px;
  margin-left: 10px;
}
</style>
